<template>
  <div id="particulars">
    <Navbar class="nav-bar"><div slot="center">商品分类</div></Navbar>
    <div class="const">
      <Tabmenu :categories="categories" @itemClick="itemClick" class="Tabmenu"/>
 
      <List :subcategory="subcategory" class="List"/>
    </div>
  </div>
</template>

<script>
import Tabmenu from '@/components/common/particulars/tabmenu';
import List from '@/components/common/particulars/tabList';

import Navbar from '@/components/content/navbar/'
import { getCategory, getSubcategory } from '@/utils/particulars/index'

export default {
  name: 'particulars',
  components: {
    Navbar,
    Tabmenu,
    List
  },
  data() {
    return {
      categories:[],
      subcategory:[],
      coIndex:0
    }
  },
  created() {
    this.GetCategory()
  },
  methods: {
    itemClick(index){
      this.coIndex = index
      this.GetCategory()
    },
    GetCategory() {
      getCategory().then((res) => {
        this.categories = res.data.data.category.list
        getSubcategory(this.categories[this.coIndex].maitKey).then(res =>{
        this.subcategory = res.data.data.list
      })
      })
    },
   
  },
}
</script>
<style scoped>
.nav-bar {
  background-color: var(--color-tint);
  font-weight: 700;
  color: #fff;
  position: relative;
  z-index: 5;
}
.const {
  height: calc(100vh - 88px);
  display: flex;
}
.Tabmenu {
  width: 30%;
}
.List {
  flex: 1;
}
</style>
